

<template>
  <div>

    <div><h1>{{flag}}</h1></div>
    <el-steps class="goCenter" width="800px" :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
    </el-steps>

    <!--  第一步-->
    <div v-if="active===1">
      <el-form ref="thrFirstForm" :model="thrFirstForm" label-width="100px" style="margin-top: 20px">
        <el-form-item label="选择商品" prop="name">
          <div class="spq">
            <div v-if="proImageUrl!=''">
              <img :src="proImageUrl" alt="Image" style="width: 100px; height: 100px;" />
            </div>
            <div class="proIcBox" @click="proIcBoxOnclick()">
              <i  class="el-icon-shopping-bag-2 el-icon"> </i>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>


    <!--  第二步-->
    <div v-if="active===2">
      <el-form ref="theBigForm" :model="theBigForm" label-width="100px" style="margin-top: 20px">
        <el-form-item label="商品主图" prop="img">
          <template slot-scope="scope">
            <img :src="proImageUrl" alt="不要跳过第一步" style="width: 50px;height: 50px">
          </template>
        </el-form-item>


        <!--      <el-form-item label="商品轮播图">-->
        <!--        <template slot-scope="scope">-->
        <!--          <div class="imgbox" v-for="(imageUrl, index) in showItemList" :key="index">-->
        <!--          </div>-->
        <!--        </template>-->
        <!--      </el-form-item>-->


        <el-form-item label="砍价活动名称" prop="name">
          <el-input v-model="theSecondForm.shopName"/>
        </el-form-item>

        <el-form-item label="砍价活动简介" prop="intro">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="theBigForm.intro">
          </el-input>
        </el-form-item>




        <el-form-item label="活动时间">
          <el-date-picker
            v-model="timeList"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>


        <el-form-item label="物流方式" prop="logisticsMode">
          <el-checkbox-group v-model="logisticsModeList">
            <el-checkbox label="1">快递</el-checkbox>
            <el-checkbox label="2">到店核销</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="运费设置" prop="logisticsSettingType">
          <template slot-scope="scope">
            <el-radio v-model="theBigForm.logisticsSettingType" label="1">固定邮费</el-radio>
            <el-radio v-model="theBigForm.logisticsSettingType" label="2">运费模板</el-radio>
          </template>
        </el-form-item>
        <div v-if="theBigForm.logisticsSettingType=='1'">
          <el-form-item label="邮费" prop="logisticsSettingValue">
            <el-input v-model="theBigForm.logisticsSettingValue"/>
          </el-form-item>
        </div>


        <el-form-item label="拼团时效" prop="pintuanShixiao">
          <el-input v-model="theBigForm.pintuanShixiao"/>
          <i style="color: gray">用户发起拼团后开始计时，需在设置时间内邀请到规定好友人数参团，超过时效时间，则系统判定拼团失败，自动发起退款</i>
        </el-form-item>


        <el-form-item label="拼团人数" prop="needAllFrequency">
          <el-input v-model="theBigForm.needAllFrequency"/>
          <i style="color: gray">需要多少人砍价成功</i>
        </el-form-item>




        <el-form-item label="虚拟成团补齐人数" prop="helpGrouping">
          <el-input v-model="theBigForm.helpGrouping"/>
          <i style="color: gray">设置虚拟成团的补齐人数，如：5人团设置补齐2人，当团队成员大于等于3人时，拼团结束时自动补齐剩余最多2个位置，不开启虚拟成团请设置为0</i>
        </el-form-item>


        <el-form-item label="总购买数量限制" prop="canGetNumAll">
          <el-input v-model="theBigForm.canGetNumAll"/>
          <i style="color: gray">该商品活动期间内，用户可购买的最大数量。例如设置为4，表示本次活动有效期内，每个用户最多可购买4件制</i>
        </el-form-item>



        <el-form-item label="单次购买数量限制" prop="canGetNumOne">
          <el-input v-model="theBigForm.canGetNumOne"/>
          <i style="color: gray">单个商品用户可以帮砍的次数，例：次数设置为1，甲和乙同时将商品A的砍价链接发给丙，丙只能帮甲或乙其中一个人砍价</i>
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-input v-model="theSecondForm.unit"/>
        </el-form-item>

        <el-form-item label="排序" prop="weight">
          <el-input v-model="theSecondForm.weight"/>
        </el-form-item>

        <el-form-item label="团长返佣比例" prop="getManyMoney">
          <el-input v-model="theBigForm.getManyMoney"/>
        </el-form-item>



        <el-form-item label="拼团是否参与分销" prop="joinYesNo">
          <el-switch
            v-model="theBigForm.joinYesNo"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>


        <el-form-item label="活动状态" prop="status">
          <el-switch
            v-model="theSecondForm.shopStatus"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>


        <!--        <el-form-item label="上架状态" prop="status">-->
        <!--          <el-radio v-model="theSecondForm.shopStatus" :label="1">开启</el-radio>-->
        <!--          <el-radio v-model="theSecondForm.shopStatus" :label="2">关闭</el-radio>-->
        <!--        </el-form-item>-->




        <el-form-item label="规格选择">
          <el-table
            :data="speList"
            style="width: 100%">
<!--            处理成多选框-->


                <el-table-column width="30">
                <template slot-scope="scope">
                  <el-checkbox-group v-model="checkList">
                  <el-checkbox :label="scope.row.id" :@click="checkBoxClick()"></el-checkbox>
                  </el-checkbox-group>
                </template>
                </el-table-column>




            <el-table-column
              prop="id"
              label="id"
              width="50">
            </el-table-column>
            <el-table-column
              prop="specificationGoods"
              label="属性名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="statsName"
              label="规格名称"
              width="180">
            </el-table-column>
            <el-table-column label="拼团价">
              <template slot-scope="scope">
                <el-input v-model="scope.row.startPrice"></el-input>
              </template>
            </el-table-column>


            <el-table-column label="限量">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sillSum"></el-input>
              </template>
            </el-table-column>

          </el-table>
        </el-form-item>

      </el-form>
    </div>


    <!--  第三个-->
    <div v-if="active===3">

      <quill-editor  v-model="this.fuckyou"></quill-editor>
    </div>

















    <div class="online">
      <div v-if="this.active===1||this.active<=1">
        <el-button type="primary" icon="el-icon-arrow-left" style="margin-top: 12px;margin-left: 10px" disabled>上一步</el-button>
      </div>
      <div v-if="active>1||active!=1">
        <el-button type="primary"  icon="el-icon-arrow-left" style="margin-top: 12px;margin-left: 10px" @click="last">上一步</el-button>
      </div>
      <div v-if="this.active<3">
        <el-button  type="primary" style="margin-top: 12px;margin-left: 10px"@click="next">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </div>

      <div v-if="this.active===3">
        <el-button  type="primary" style="margin-top: 12px;margin-left: 10px" @click="submitPro">提  交</el-button>
      </div>
    </div>







    <!-- 选择商品界面二级弹出框 -->
    <el-dialog title="选择商品" :visible.sync="openSecond" width="800px" append-to-body>
      <el-form ref="proForm" :model="proForm"  label-width="80px">
        <el-form-item label="商品分类" prop="typeId">
          <div class="block">
            <el-cascader
              :options="checkItem"
              :props="{ checkStrictly: true , value:'id' , label:'name'}"
              :value='checkItem.id'
              :label="checkItem.name"
              clearable></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="商品搜索" prop="name">
          <el-input v-model="proForm.name"/>
        </el-form-item>
      </el-form>


      <el-table
        :data="showItemList"
        height="250"
        border
        style="width: 100%">
        <el-table-column prop="pid" width="30">
          <template slot-scope="scope">
            <el-radio :label="scope.row.id"  @input="checkPro(scope.row)"></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品id"
          width="180">
        </el-table-column>
        <el-table-column label="图片" align="center" prop="carousel" width="199">
          <template slot-scope="scope">
            <image-preview :src="scope.row.carousel" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="shopName"
          label="商品名称"
          width="380">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPro">提 交</el-button>
      </div>
      <pagination
        v-show="prototal>0"
        :total="prototal"
        :page.sync="showItemList.pageNum"
        :limit.sync="showItemList.pageSize"
        @pagination="findAllItem"
      />
    </el-dialog>

  </div>
</template>
<script>
import {getItem, listItem} from "@/api/product/pro";
import {listPro} from "@/api/system/pro";
import {getSpeByBargain, getSpecificationList} from "@/api/sset/specification";
import {addProduct, getProduct, updateProduct} from "@/api/points/pointsProduct";
import {addBargainProduct, getBargainProduct, updateBargainProduct} from "@/api/points/bargainProduct";
import {addGroupingProduct, getGroupingProduct, updateGroupingProduct} from "@/api/points/groupingProduct";

export default {
  created() {
    if (this.$route.query.id) {
      this.flag='更新';
      if(this.$route.query.copy){
        this.flag='复制';
      }
      this.id=this.$route.query.id;
      getGroupingProduct(this.id).then(response => {
        this.proImageUrl=response.data.img;
        this.fuckyou='<img src="'+this.proImageUrl+'">';
        this.checkList=response.data.list;

        this.timeList[0]=response.data.startTime;
        this.timeList[1]=response.data.endTime;
        this.theSecondForm.shopName=response.data.name;
        this.theSecondForm.unit=response.data.unit;
        this.theSecondForm.weight=response.data.weight;
        this.theSecondForm.shopStatus=response.data.status;
        this.theBigForm = response.data;
        this.theBigForm.specificationId=Number(response.data.specificationId);

      });

      console.log(this.proImageUrl)
    }
    this.findAllItem();
    this.getItem();
    this.getStats(this.proId);
  },
  data() {
    return {
      checkList:[],
      fuckyou: '',
      editorOption: {
        // 占位配置
        placeholder: '请输入...',
        height: '300px',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            ['link', 'image', 'video'], // 链接、图片、视频
            [{ align: [] }], // 添加居中按钮
            [{ color: [] }], // 文字颜色按钮
          ],
          // 更改插入的图片大小
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        }
      },
      // 存放物流方式的数组
      logisticsModeList:[],
      // 开始结束时间的数组
      timeList:[],
      // 查找的id
      id:'',
      flag:'添加',
      // 最终发送给后台的表单
      theBigForm:{},
      // 条件查询的
      checkItem:[],
      speList:[],
      // 第一个步骤进行商品添加时查询list的赋值数组
      showItemList:[],
      openSecond:false,
      // 商品弹出框表单的form对象
      proForm:{},
      // 保存img回显的数据，不用这个了，直接用字符串proImageUrl进行展示
      // 商品id
      proId:'',
      saveImg:{},
      // 分页数据
      prototal:0,
      active: 1,
      thrFirstForm:{},
      theSecondForm:{},
      theThirdForm:{},
      proImageUrl:'',
      defaultValue: '1',
      //   用来存放规格id的
      itemIdStr:'',
    };
  },

  methods: {
    // 多选框点击事件
    checkBoxClick(){
      console.log(this.checkList)
    },


    checkspeListId(row){
      console.log(row.id+"===")
      this.theBigForm.specificationId=row.id;
      this.theBigForm.startPrice=row.startPrice;
      this.theBigForm.sillSum=row.sillSum;
      this.theBigForm.minPrice=row.minPrice;
      this.theBigForm.sillNum=row.sillSum;
    },
    updateValue(value){
      this.defaultValue = value; // 更新默认值
    },
    getShop(id){
      getItem(id).then(response => {
        this.theSecondForm=response.data;
      })
    },
    // 读取所有规格
    getStats(id){
      getSpeByBargain(id).then(response => {
        this.speList=response.data;
      })
    },
    checkPro(row){

      this.proForm.proId=row.id;
      // 获取这一行的img图片传给div进行展示

      this.proImageUrl=row.carousel;
      this.fuckyou='<img src="'+this.proImageUrl+'">';
      console.log(this.content+"saddasdas")
      this.theBigForm.img=row.carousel;
      this.theBigForm.proId=row.id;
      this.proId=row.id;
      this.getShop(this.proId);
      console.log(this.proImageUrl)
      this.openSecond=false;
    },
    // 获取规格
    getItem(){
      listPro().then(response => {
        this.checkItem=response.rows;
      })
    },
    // 商品添加界面
    findAllItem(){
      listItem(this.proForm).then(response => {
        this.prototal=response.total;
        this.showItemList=response.rows;
      })
    },
    proIcBoxOnclick(){
      this.checkboxImg=[];
      this.checkboxId=[];
      this.openSecond=true;
    },
    next() {
      if(this.active<3){
        this.active=this.active+1
      }
    },
    submitPro(){
      this.theBigForm.list=this.checkList;
      let modeStr= '';
      for (let i = 0; i < this.logisticsModeList.length; i++) {
        modeStr+=this.logisticsModeList[i].id+",";
      }
      this.theBigForm.logisticsMode=modeStr;
      this.theBigForm.startTime=this.timeList[0];
      this.theBigForm.endTime=this.timeList[1];
      this.theBigForm.name=this.theSecondForm.shopName;
      this.theBigForm.weight= this.theSecondForm.weight;
      this.theBigForm.unit= this.theSecondForm.unit;
      this.theBigForm.needPoints= this.speList.needPoints;

      if(this.flag=='添加'){
        addGroupingProduct(this.theBigForm).then(response => {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        })
      }else if(this.flag=='更新'){
        updateGroupingProduct(this.theBigForm).then(response => {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        })
      }else if(this.flag=="复制"){
        addGroupingProduct(this.theBigForm).then(response => {
          this.$message({
            message: '复制成功',
            type: 'success'
          });
        })
      }
      this.$router.push({
        path: '/points/groupingProduct'});

    },
    last(){
      if(this.active>1){
        this.active=this.active-1
        console.log(this.active)
      }
    }

  }
}
</script>

<style scoped lang="scss">
.goCenter{
  margin: 0 auto;
  width: 500px;
}
.online{
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: nowrap; /* 不换行，横向展示 */
}
.proIcBox{
  margin-top: 20px;
  margin-left: 28px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, .1);
  border-radius: 4px;
  background: rgba(0, 0, 0, .02);
}
/* 编辑器高度及背景色 */
::v-deep .ql-editor {
  min-height: 300px;
  background-color: #fff;
}
.my-quill-editor{
  height: 300px;
  margin-bottom: 60px;
}
.el-icon{
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  margin-left: 18px;
}
.spq{
  width: 1000px;
  height: 80px;
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: nowrap; /* 不换行，横向展示 */
  margin-top: -20px;
}
</style>
